<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="renderer" content="webkit">
		<title>ECharts资源统计柱形图</title>
		<script src="echarts/echarts-all.js"></script>
		<script src="js/global.js"></script>
		<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
	</head>

	<body>

		<!-- 为ECharts准备一个具备大小（宽高）的Dom【咨询师分配统计--柱形图】 -->
		<div id="main" style="width: 560px; height: 350px;float:right;z-index:100;"></div>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom【网络咨询师录入统计--柱形图】-->
		<div id="main1" style="width: 560px; height: 350px;"></div>

		<!-- 为ECharts准备一个具备大小（宽高）的Dom 【咨询师分配统计--折线图】-->
		<div id="main2" style="width: 560px; height: 350px;float:right;z-index:100;"></div>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom 【网络咨询师录入统计--折线图】-->
		<div id="main3" style="width: 560px; height: 350px;"></div>

		<!-- 脚本代码部分 -->
		<script type="text/javascript">
			layui.use('laydate',
				function() {
					var laydate = layui.laydate;
					var $ = layui.$;

					//定义函数
					var active = {
						qingqiu: function() {
							//ajax异步请求服务端 获取 图表的数据---咨询师分配统计--柱形图
							$.get(globalData.server + "getZxsResInfo?token=" + globalData.getToken(), function(res) {
								console.log(res.xdata);
								console.log(res.ydata);
								console.log(res.ydata1);
								active.tubiao(res.xdata, res.ydata, res.ydata1);
							});
						},
						qingqiu2: function() {
							//ajax异步请求服务端 获取 图表的数据---咨询师分配统计--折线图
							$.get(globalData.server + "getZxsResInfo?token=" + globalData.getToken(), function(res) {
								console.log(res.xdata);
								console.log(res.ydata);
								console.log(res.ydata1);
								active.tubiao2(res.xdata, res.ydata, res.ydata1);
							});
						},
						qingqiuint: function() {
							//ajax异步请求服务端 获取 图表的数据---网络咨询师录入统计--柱形图
							$.get(globalData.server + "getWlzxsResInfo?token=" + globalData.getToken(), function(res) {
								console.log(res.xdata);
								console.log(res.ydata);
								active.tubiaoint(res.xdata, res.ydata);
							});
						},
						qingqiuint2: function() {
							//ajax异步请求服务端 获取 图表的数据---网络咨询师录入统计--折线图
							$.get(globalData.server + "getWlzxsResInfo?token=" + globalData.getToken(), function(res) {
								console.log(res.xdata);
								console.log(res.ydata);
								active.tubiaoint2(res.xdata, res.ydata);
							});
						},

						//咨询师分配统计--柱形图
						tubiao: function(xData, yData,yData1) {
							// 基于准备好的dom，初始化echarts实例
							var myChart = echarts.init(document
								.getElementById('main'));
							// 指定图表的配置项和数据
							var option = {
								title: {
									text: '咨询师客户柱形图'
								},
								tooltip: {},
								legend: [{
									top: "2%",
									right: "20%",
									textStyle: {
										color: "#3BAEFE",
										fontSize: 14,
										fontFamily: "微软雅黑"
									},
									itemWidth: 27,
									itemHeight: 16,
									data: [{
										name: "分配追踪人数",
										icon: "circle"
									}, {
										name: "转化客户人数",
										icon: "rect"
									}]
								}],
								xAxis: {
									type: 'category',
									data: xData
									//x轴的数据
								},
								yAxis: {},
								series: [{
									name: '分配追踪人数',
									type: 'bar', //bar 柱状图     line 折线图 
									data: yData

									//y轴的数据
								}, {
									name: '转化客户人数',
									type: 'bar', //bar 柱状图     line 折线图 
									data: yData1

									//y轴的数据
								}]
							};
							// 使用刚指定的配置项和数据显示图表。
							myChart.setOption(option);
						},

						//咨询师分配统计--折线图
						tubiao2: function(xData, yData,yData1) {
							// 基于准备好的dom，初始化echarts实例
							var myChart = echarts.init(document
								.getElementById('main2'));
							// 指定图表的配置项和数据
							var option = {
								title: {
									text: '咨询师客户折线图'
								},
								tooltip: {},
								legend: [{
									top: "2%",
									right: "20%",
									textStyle: {
										color: "#3BAEFE",
										fontSize: 14,
										fontFamily: "微软雅黑"
									},
									itemWidth: 27,
									itemHeight: 16,
									data: [{
										name: "分配追踪人数",
										icon: "circle"
									}, {
										name: "转化客户人数",
										icon: "rect"
									}]
								}],
								xAxis: {
									type: 'category',
									data: xData
									//x轴的数据
								},
								yAxis: {},
								series: [{
									name: '分配追踪人数',
									type: 'line', //bar 柱状图     line 折线图 
									data: yData

									//y轴的数据
								}, {
									name: '转化客户人数',
									type: 'line', //bar 柱状图     line 折线图 
									data: yData1

									//y轴的数据
								}]
							};
							// 使用刚指定的配置项和数据显示图表。
							myChart.setOption(option);
						},

						//网络咨询师录入统计--柱形图
						tubiaoint: function(xData, yData) {
							// 基于准备好的dom，初始化echarts实例
							var myChart = echarts.init(document
								.getElementById('main1'));
							// 指定图表的配置项和数据
							var option = {
								title: {
									text: '网络咨询师客户柱形图'
								},
								tooltip: {},
								legend: {
									data: ['录入客户人数']
								},
								xAxis: {
									type: 'category',
									data: xData
									//x轴的数据
								},
								yAxis: {},
								series: [{
									name: '录入客户人数',
									type: 'bar', //bar 柱状图     line 折线图 
									data: yData
									//y轴的数据
								}]
							};
							// 使用刚指定的配置项和数据显示图表。
							myChart.setOption(option);
						},

						//网络咨询师录入统计--折线图
						tubiaoint2: function(xData, yData) {
							// 基于准备好的dom，初始化echarts实例
							var myChart = echarts.init(document
								.getElementById('main3'));
							// 指定图表的配置项和数据
							var option = {
								title: {
									text: '网络咨询师客户折线图'
								},
								tooltip: {},
								legend: {
									data: ['录入客户人数']
								},
								xAxis: {
									type: 'category',
									data: xData
									//x轴的数据
								},
								yAxis: {},
								series: [{
									name: '录入客户人数',
									type: 'line', //bar 柱状图     line 折线图 
									data: yData
									//y轴的数据
								}]
							};
							// 使用刚指定的配置项和数据显示图表。
							myChart.setOption(option);
						}
					}; //定义函数---end

					//调用函数中的请求--咨询师分配统计--柱形图
					active.qingqiu();

					//调用函数中的请求--咨询师分配统计--折线图
					active.qingqiu2();

					//调用函数中的请求--网络咨询师录入统计--柱形图
					active.qingqiuint();

					//调用函数中的请求--网络咨询师录入统计--折线图
					active.qingqiuint2();
				});
		</script>

	</body>

</html>